ARIA: aria-multiselectable-Attribut

Das Standardverhalten von Auswahllisten, wie z.B. <select>, ist, dass nur ein Element oder eine Option ausgewählt werden kann. Standardmäßig oder aus Gewohnheit gehen Benutzer davon aus, dass sie nur ein einzelnes Element auswählen können, wenn ihnen eine Liste präsentiert wird, aus der sie ein Element auswählen müssen, es sei denn, sie werden anders benachrichtigt. Das aria-multiselectable-Attribut ist die Möglichkeit, Benutzer von unterstützender Technologie darüber zu informieren, dass sie mehr als ein Element aus den aktuellen auswählbaren Elementen auswählen können, wenn sie dies möchten. Listen und Bäume sind Beispiele für Rollen, die es Benutzern ermöglichen könnten, mehr als ein Element gleichzeitig auszuwählen.

Wenn der Benutzer ein oder mehrere Elemente auswählt, denken Sie daran, die ausgewählten Nachkommen als ausgewählt zu kennzeichnen mit aria-selected="true", und auswählbare Nachkommen, die nicht ausgewählt sind, haben aria-selected="false" gesetzt. Wenn ein Element nicht auswählbar ist, lassen Sie das aria-selected-Attribut vollständig weg, da seine Präsenz den Benutzer darüber informiert, dass das Element auswählbar ist.

Wenn ein Baum, Raster, Registerkartenliste oder Listenfeld die Auswahl von mehr als einem Knoten unterstützt, hat das Element mit der Rolle grid, listbox, tablist oder tree aria-multiselectable auf true gesetzt. Andernfalls ist aria-multiselectable entweder auf false gesetzt oder der Standardwert false wird impliziert.

<p id="colorOptions">Choose the colors for your flag.</p>
<ul
  tabindex="0"
  role="listbox"
  aria-labelledby="colorOptions"
  aria-multiselectable="true">
  <li id="red" role="option" aria-selected="false">Red</li>
  <li id="orange" role="option" aria-selected="false">Orange</li>
  <li id="yellow" role="option" aria-selected="false">Yellow</li>
  <li id="green" role="option" aria-selected="false">Green</li>
  <li id="blue" role="option" aria-selected="false">Blue</li>
  <li id="purple" role="option" aria-selected="false">Purple</li>
  <li id="magenta" role="option" aria-selected="false">Hot pink</li>
  <li id="lightpink" role="option" aria-selected="true">Light pink</li>
  <li id="white" role="option" aria-selected="true">White</li>
  <li id="lightblue" role="option" aria-selected="true">Light blue</li>
  <li id="black" role="option" aria-selected="false">Black</li>
  <li id="brown" role="option" aria-selected="false">Brown</li>
</ul>

Diese Listenfeld unterstützt Mehrfachauswahl, daher setzen wir das Element mit der Rolle listbox auf aria-multiselectable="true". Alle ausgewählten Optionen haben aria-selected auf true gesetzt. Alle Optionen, die nicht ausgewählt, aber auswählbar sind, haben aria-selected auf false gesetzt. Hätten wir Optionen eingeschlossen, die deaktiviert oder anderweitig nicht auswählbar sind, hätten wir das aria-selected-Attribut vollständig weggelassen. Das Einschließen des Attributs, auch ohne Wert oder explizit auf false gesetzt, weist Benutzer von unterstützender Technologie darauf hin, dass das Element auswählbar ist.

Die erste Regel der ARIA-Nutzung lautet: "Wenn Sie eine native Funktion mit der gewünschten Semantik und dem gewünschten Verhalten verwenden können, anstatt ein Element neu zu verwenden und **ein ARIA-Rolle, -Status oder -Eigenschaft hinzuzufügen, um es zugänglich zu machen, dann tun Sie dies." Anstatt eine unsortierte Liste zu erstellen, die tabindex, ARIA und JavaScript erfordert, um Text in auswählbare Optionen zu verwandeln, könnten wir eine native Mehrfachauswahl verwenden: das <select>-Element hat ein Boolean-Attribut multiple. Wenn enthalten, kann der Benutzer mehrere Optionen auswählen. Wenn nicht, kann nur eine einzelne Option ausgewählt werden.

<label for="flagcolors"> Choose the colors for your flag. </label>
<select multiple id="flagcolors">
  <option value="red">Red</option>
  <option value="orange">Orange</option>
  <option value="yellow">Yellow</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
  <option value="purple">Purple</option>
  <option value="magenta">Hot pink</option>
  <option value="lightpink" selected>Light pink</option>
  <option value="white" selected>White</option>
  <option value="lightblue" selected>Light blue</option>
  <option value="black">Black</option>
  <option value="brown">Brown</option>
</select>

Diese HTML-<select>-Version ist zugänglich und interaktiv und benötigt keine ARIA oder JavaScript, um zu funktionieren.

Wenn das obige nicht nach Ihrem Geschmack stilisiert werden kann, können Sie auch eine Liste von auswählbaren Optionen mit HTML-Checkboxen erstellen, die ebenfalls semantisch, fokussierbar und unendlich mit CSS stilisierbar ist:

<fieldset>
  <legend>Choose the colors for your flag.</legend>
  <ul>
    <li>
      <label><input type="checkbox" name="fc" value="red" />Red</label>
    </li>
    <li>
      <label><input type="checkbox" name="fc" value="orange" />Orange</label>
    </li>
    <li>
      <label><input type="checkbox" name="fc" value="yellow" />Yellow</label>
    </li>
    <li>
      <label><input type="checkbox" name="fc" value="green" />Green</label>
    </li>
    <li>
      <label><input type="checkbox" name="fc" value="blue" />Blue</label>
    </li>
    <li>
      <label><input type="checkbox" name="fc" value="purple" />Purple</label>
    </li>
    <li>
      <label><input type="checkbox" name="fc" value="magenta" />Hot pink</label>
    </li>
    <li>
      <label
        ><input type="checkbox" name="fc" value="lightpink" checked />Light
        pink</label
      >
    </li>
    <li>
      <label
        ><input type="checkbox" name="fc" value="white" checked />White</label
      >
    </li>
    <li>
      <label
        ><input type="checkbox" name="fc" value="lightblue" checked />Light
        blue</label
      >
    </li>
    <li>
      <label><input type="checkbox" name="fc" value="black" />Black</label>
    </li>
    <li>
      <label><input type="checkbox" name="fc" value="brown" />Brown</label>
    </li>
  </ul>
</fieldset>

Anstelle von aria-selected="true", fügen Sie das checked-Attribut ein. Der Browser erledigt den Rest.

true

Mehr als ein Element im Widget kann gleichzeitig ausgewählt werden

false

Nur ein Element kann ausgewählt werden

Element.ariaMultiSelectable

Die ariaMultiSelectable-Eigenschaft, Teil der Element-Schnittstelle, spiegelt den Wert des aria-multiselectable-Attributs wider.

ElementInternals.ariaMultiSelectable

Die ariaMultiSelectable-Eigenschaft, Teil der ElementInternals-Schnittstelle, spiegelt den Wert des aria-multiselectable-Attributs wider.

Verwendet in Rollen:

• grid
• listbox
• tablist
• tree

Vererbt in Rollen:

• treegrid

• HTML <select>-Element
• HTML <option>-Element
• HTML <input>-Element
• multiple-Attribut
• aria-selected